* {
  margin: 0;
  padding: 0;
}
body {
  background: #333;
}
.main {
  width: 30vw;
  height: 30vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.main span {
  width: 8vw;
  height: 8vw;
  display: block;
  float: left;
  background: transparent;
  margin: 1vw;
  border-radius: 1vw;
  animation: light 2s linear infinite calc(0.25s * var(--s));
}
.hide {
  visibility: hidden;
}
@keyframes light {
  20% {
    background: white;
    box-shadow: 0 0 10px #3498db, 0 0 20px #3498db, 0 0 40px #3498db;
  }
}
h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20vw;
  z-index: -1;
  color: #3498db;
  filter: blur(1vw);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}
